<!-- 通用型的表格组件 -->
<!-- 参数 用于描述表格的功能
  tablecfg: [{
    prop: 'cdfsSystemName', //字段
    lable: '数据来源系统', //标题名称
	width:100,//宽度 可以不写
	type: 'text',   //显示类型
    showFunction: 'fun', //用于解析显示数据的方法，用于通用型无法处理的类型,
  }],

//数据类型如下
text ：简单文字 什么都不用处理
date: 日期显示为 月日


operation ：操作项 可以直接传递按钮 也可以自定义插槽
  buttons: [{
    name: "新增",
    type: 'primary',
    event: 'create',
    eventData: {}
  }],
  //如果是想自定义 则插槽写法如下所示
  <template v-slot:operation="{ item}">
  	<div>test</div>
  </template>
  
-->
<!-- 事件
  select data：{key：value}标准搜索json
 -->
<template>
	<div class="tableDiv">
		<el-table stripe :data="tableData" style="border-radius: 6px" :header-cell-style="{color:'#333333',fontFamily:'PingFang SC',fontSize:'14px',fontWeight:500,background: '#F4F8FF',
		borderBottom: '1px solid #B9DAF2'}">
		   <template v-for="item in tableCfg">
			   <el-table-column :prop="item.prop" :label="item.lable" :width="item.width">
				   <template slot-scope="scope">
					   <!-- 默认当做文字处理 -->
					   <template v-if="!item.type || item.type=='text'">
						   {{scope.row[item.prop]}}
					   </template>
					   <!-- 日期 -->
					   <template v-if="item.type=='date'">
					   		{{DateUtil.toLocaleDateString(scope.row[item.prop])}}
					   </template>
					   <template v-if="item.type=='operation'">
						   	<slot name="operation" :item="item">
								<template v-for="bt in item.buttons">
									<el-button v-blur class="button_class" :class="bt.type?bt.type:'primary'" size="mini" :type="bt.type?bt.type:success" @click="throwevent(bt)">{{bt.name}}
									</el-button>
								</template>
							</slot>
					   </template>
				   </template>
			   </el-table-column>
		   </template>
		</el-table>
	</div>
</template>

<script>
    import "@/assets/plugsclass.css"
	export default {
		name: "mainview",
		props: {
			tableCfg: Array,
			tableData:Array,
		},
		components: {},
		data() {
			return {
			};
		},
		created() {
		
		},
		methods: {
			throwevent(item) {
				//自定按钮点击之后向父级发送事件
				// console.log(item)
				this.$emit(item.event, item.eventData)
			},
		}
	};
</script>

<style scoped="" lang='scss'>
.tableDiv{
	background: #FFFFFF;
	border: 1px solid #B9DAF2;
	border-radius: 6px;
	margin-top: 20px;
}

	
</style>
